<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>登录</title>
    <style>
        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        .login-box {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 350px;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
        }

        input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        button {
            width: 100%;
            padding: 0.6rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        .link {
            text-align: center;
            margin-top: 1rem;
        }

        .link a {
            color: #007bff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="login-box">
    <h2>用户登录</h2>
    <div class="login-container">
<!--        <div class="error-message" id="errorMsg"></div>-->
<!--        <div class="success-message" id="successMsg"></div>-->
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required
                       autocomplete="username">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <div class="password-container">
                    <input type="password" id="password" name="password" placeholder="请输入密码" required
                           autocomplete="current-password">
                </div>
            </div>
            <button type="submit">登录</button>
        </form>
    </div>
    <div class="link">
        还没账号？<a th:href="@{/api/register}">去注册</a>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const loginForm = document.getElementById('loginForm');
        const errorMsg = document.getElementById('errorMsg');
        const successMsg = document.getElementById('successMsg');
        const loading = document.getElementById('loading');


        // 表单提交处理
        loginForm.addEventListener('submit', async function (event) {
            event.preventDefault();
            // 获取表单数据
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            try {
                //发送登录请求
                const response = await fetch('/api/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Accept': 'application/json'
                    },
                    body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
                });

                // 处理响应
                const responseText = await response.text();
                const result = JSON.parse(responseText)
                console.log("result", result);
                if (result.code === "200") {
                    //将token存进localStorage
                    localStorage.setItem("token", result.data)
                    window.location.href = '/api/chat';
                    //使用fetch API携带token跳转到聊天页面
                    //await navigateToChatWithToken(result.data);
                } else {
                    // 登录失败
                    errorMsg.textContent = result;
                    errorMsg.style.display = 'flex';
                }
            } catch (error) {
                // 网络错误
                errorMsg.textContent = '网络错误，请稍后重试';
                errorMsg.style.display = 'flex';
            }
        });
    });

    //使用token跳转到聊天页面的函数
    async function navigateToChatWithToken(token) {
        // 先尝试通过fetch携带token访问聊天页面
        const response = await fetch('/api/chat', {
            method: 'GET',
            headers: {
                'Authorization': token,
                'Accept': 'text/html' // 请求HTML页面
            }
        });
        if (response.ok) {
            // 获取HTML内容
            const htmlContent = await response.text();

            console.log("获取到chat页面HTML");

            // 替换当前页面内容
            document.open();
            document.write(htmlContent);
            document.close();

        }
    }
</script>
</body>
</html>
